﻿@page "/docs/extensions/markdown"

<Seo Canonical="/docs/extensions/markdown" Title="Blazorise Markdown component" Description="Learn to use and work with the Blazorise Markdown component, which allows you to edit markdown based strings." />

<DocsPageTitle Path="Extensions/Markdown">
    Blazorise Markdown component
</DocsPageTitle>

<DocsPageLead>
    The <Code>Markdown</Code> component allows you to edit markdown strings.
</DocsPageLead>

<DocsPageParagraph>
    The Blazorise <Code>Markdown</Code> is based on the <Blazorise.Link To="https://github.com/Ionaru/easy-markdown-editor" Target="Target.Blank">Easy MarkDown Editor</Blazorise.Link> JavaScript library.
</DocsPageParagraph>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="MarkdownNugetInstallExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ImportMarkdownExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Example" />
    <DocsPageSectionContent Outlined FullWidth>
        <MarkdownExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="MarkdownExample" />
</DocsPageSection>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        For transforming markdown value into HTML we used an excellent <Blazorise.Link To="https://github.com/xoofx/markdig" Target="Target.Blank">Markdig</Blazorise.Link> library.
    </AlertDescription>
</Alert>

<DocsPageSection>
    <DocsPageSectionHeader Title="Toolbar customization">
        The editor's toolbar can be edited to show more icons and even add custom icons!
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <MarkdownCustomButtonsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="MarkdownCustomButtonsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Upload image">
        Uploading an image has a similar API to our <Code>FileEdit</Code> component and is fairly simple to use.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <MarkdownUploadImageExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="MarkdownUploadImageExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Change Shortcuts">
        EasyMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <MarkdownShortcutsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="MarkdownShortcutsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Custom Preview Render">
        Sometimes you don't want to render preview with the built-in parser. In those situations you can make use of <Code>PreviewRender</Code> callback to override the preview HTML.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <MarkdownPreviewRenderExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="MarkdownPreviewRenderExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Markdown)]" />